<template>
  <div @click="openDetail">
    <slot>
      <a-typography-paragraph class="highlight cursor" v-if="showLimit" :ellipsis="{ rows: rows, showTooltip: { type: 'popover', props: { position: position, style: { maxWidth: maxWidth + 'px' } } } }">
        <span class="highlight cursor">{{ val || '--' }}</span>
      </a-typography-paragraph>
      <p v-else class="highlight cursor">{{ val || '--' }}</p>
    </slot>
  </div>
  <DetailDialog v-if="showDetailDialog" :renderBody="renderBody" :isShow="showDetailDialog" :sku="val" @closed="showDetailDialog = false" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  import DetailDialog from './detailDialog.vue'
  const props = defineProps({
    showLimit: {
      type: Boolean,
      default: false,
    },
    rows: {
      type: Number,
      default: 2,
    },
    maxWidth: {
      type: [Number, String],
      default: 400,
    },
    position: {
      type: String,
      default: 'bottom',
    },
    val: {
      type: String,
    },
    renderBody: {
      type: Boolean,
      default: true,
    },
  })
  const showDetailDialog = ref(false)

  async function openDetail() {
    if (!props.val) return
    showDetailDialog.value = true
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'ShowSpuDetailBySku',
  })
</script>

<style lang="less" scoped>
  .arco-typography {
    margin-bottom: 0;
    word-wrap: break-word;
  }
</style>
